<template>
	<view class="container  page-bg">
		<view class="p-2">
			<view class=" bg-fff p-2 rounded20 mb-2 " v-for="(item,index) in handSkill" :key="index+'2'">
				<view class="d-flex d-flex-between" @click="goUrl(`/subPages/game/game?id=${item.id}`,item.status)">
					<text class="label font32">{{ item.game_name }}</text>
					<view >
            <text class="label font26 mr-2 " :class="getStatusColorClass(item.status)">{{ statusList[item.status] || '未知状态' }}</text>
            <text class="iconfont icon-youjiantou color999"></text>
          </view>
				</view>
				<view class="d-flex d-flex-between mt-1 d-flex-middle">
					<text v-if="item.skill_price" class="d-flex-item label font30 colorf00"
						@click="goUrl(`/subPages/game/game?id=${item.id}`,item.status)">{{ item.skill_price }}元/小时</text>
					<text v-else class="label font30 color999" @click="goUrl(`/subPages/game/game?id=${item.id}`,item.status)">去设置</text>
					<switch :checked="item.skill_status === 1" color="#598dfc" style="transform:scale(0.6)"
						@change="onSwitch($event,item.id)" />
				</view>
			</view>
      <!-- 加载更多提示 -->
      <view class="d-flex d-flex-center py-3" v-if="loading">
        <text class="color999">加载中...</text>
      </view>
      <view class="d-flex d-flex-center py-3" v-else-if="noMore">
        <text class="color999">没有更多数据了</text>
      </view>
		</view>
      <view class="fixedBtn bg-fff pb-5 pt-3 px-2">
		<view class=" mx-2 publish-sure-bg d-flex d-flex-item d-flex-middle d-flex-center rounded40 colorfff"
			@click="goUrl('/subPages/skill/skill')">技能申请
		</view></view>
	</view>
</template>
 

<script>
	import {
		mapState
	} from "vuex"
	import {
		fileApi
	} from "@/http/fileApi.js";

	export default {
		data() {
			return {
				handSkill: [],
        page:1,
        total:'',
        loading: false, // 是否正在加载
        noMore: false,   // 是否没有更多数据
        statusList: {
          0: '未审核',
          1: '已通过',
          2: '已拒绝'
        }
			}
		},
		computed: {
			...mapState({
				loginState: state => state.loginState,
			})
		},

    onLoad(option) {
      this.page = 1;
      this.handSkill = [];
      this.noMore = false;
      this.play();
    },
    // 下拉刷新生命周期函数
    onPullDownRefresh() {
      this.refreshData();
    },
    // 上拉触底加载更多
    onReachBottom() {
      this.loadMore();
    },
		methods: {
      getStatusColorClass(status) {
        const colorMap = {
          0: 'colorhold',
          1: 'colorsuccess',
          2: 'colorf00'
        };
        return colorMap[status] || 'color999';
      },
			async play() {
        if (this.loading || this.noMore) return;

        this.loading = true;
        try {
          let res = await fileApi.getHandSkill({
            page: this.page
          });

          if (res.data) {
            // 如果是第一页，直接赋值；否则追加数据
            if (this.page === 1) {
              this.handSkill = res.data.list || res.data;
            } else {
              this.handSkill = [...this.handSkill, ...(res.data.list || res.data)];
            }

            // 更新总条数和判断是否还有更多数据
            this.total = res.data.total || 0;
            this.noMore = this.handSkill.length >= this.total || (res.data.list || res.data).length < this.pageSize;
          }
        } catch (error) {
          console.error('获取技能数据失败', error);
          uni.showToast({
            title: '获取数据失败',
            icon: 'none'
          });
        } finally {
          this.loading = false;
        }
			},
      // 刷新数据（下拉刷新）
      async refreshData() {
        this.page = 1;
        this.noMore = false;
        await this.play();
        // 停止下拉刷新
        uni.stopPullDownRefresh();
      },

      // 加载更多数据（上拉加载）
      async loadMore() {
        if (this.loading || this.noMore) return;

        this.page++;
        await this.play();
      },
			goUrl(urlPages,status) {
				if (!this.loginState) {
					uni.showToast({
						title: '未登录，请先登录！',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 1500)
				} else {
          if (status == 1|| status == undefined) {
            uni.navigateTo({
              url: urlPages
            })
          }else  {
            setTimeout(() => {
              uni.navigateTo({
                url: '/subPages/skill/skill'
              })
            }, 1500)
          }

				}
			},
			async onSwitch(event, id) {
				await fileApi.handSkillStatus({
					id: id
				})
			}
		},

	}
</script>

<style scoped>
	.container {
		position: relative;
	}


	.label {
		width: 160rpx;
	}

	input {
		flex: 1;
		height: 80rpx;
		font-size: 28rpx;
	}


	.placeholder .img {
		width: 30%;
	}

	.publish-sure-bg {
		background-color: #598dfc;
		height: 80rpx;
	}
  .fixedBtn {
    position: fixed;
    bottom: 0;
    width: calc(100% - 40rpx);
  }
</style>